<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
		#top{
			width: 100%;
			height: 80px;
			background: #000;
		}
		button{
			width: 100px;
			height: 50px;
			background: #ccc;
		}
		#btn1{
			margin-left: 40%;
		}
		table{
			margin:0 auto;
			width: 1000px;
		}
		#main{
			width: 500px;
			height: 400px;
			background: #ccc;
			margin:0 auto;
			display: none;
		}
		#left{
			width: 250px;
			height: 400px;
			/*background: pink;*/
			float: left;
			list-style: none;
			line-height: 45px;
		}
		#right{
			width: 250px;
			height: 400px;
			/*background: pink;*/
			float: left;
			list-style: none;
			line-height: 45px;

		}
		#add{
			width: 100px;
			height: 30px;
			margin-left: 50px;
			background: skyblue;
		}
	</style>
</head>
<body>
	<div id="top"></div>
	<button id="btn1">添加数据</button><button id="btn2">刷新</button>
	<table border="1">
		<thead>
			<tr>
				<th><input type="checkbox" name=""></th>
				<th>图片</th>
				<th>书名</th>
				<th>作者</th>
				<th>会员价</th>
				<th>出版社</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="tab">

		</tbody>
	</table>
	<div id="main">
	<ul id="left">
		<li>书名<input type="text" name=""></li>
		<li>价格<input type="text" name=""></li>
		<li>评分<input type="text" name=""></li>
		<li>作者<input type="text" name=""></li>
		<li>出版社<input type="text" name=""></li>
	</ul>
	<ul id="right">
		<li>上架时间<input type="text" name=""></li>
		<li>页数<input type="text" name=""></li>
		<li>版本<input type="text" name=""></li>
		<li>分类<input type="text" name=""></li>
		<li>图片<input type="text" name=""></li>
		<button id="add">添加</button>
	</ul>

	</div>
</body>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// var add = document.getElementById("add");
// var btn1 = document.getElementById("btn1");
// var btn2 = document.getElementById("btn2");
// var main = document.getElementById("main");
// var tab = document.getElementById("tab");
var t,t1;
btn1.onclick = function(){
	main.style.display = "block";
}

add.onclick = function(){
	main.style.display = "none";
	$.get("http://localhost:2403/mybook",function(data){
	console.log(data);
	})
	var a2={
		bookname:$("input:text").eq(0).val(),
		price:$("input:text").eq(1).val(),
		score:$("input:text").eq(2).val(),
		preson:$("input:text").eq(3).val(),
		form:$("input:text").eq(4).val(),
		time:$("input:text").eq(5).val(),
		num:$("input:text").eq(6).val(),
		banben:$("input:text").eq(7).val(),
		type:$("input:text").eq(8).val(),
		pic:$("input:text").eq(9).val()
	}
	$.post("http://localhost:2403/mybook",a2,function(data){
		console.log(data);
	})
}
btn2.onclick = function(){
	$("#tab tr").remove();
	$.get("http://localhost:2403/mybook",function(data){
	console.log(data);
	for(var i = 0;i < data.length;i++){
		$("<tr class='tr1'><td><input type='checkbox'></td><td><img src='"+data[i].pic+"'></td><td>"+data[i].bookname+"</td><td>"+data[i].preson+"</td><td>"+data[i].price+"</td><td>"+data[i].form+"</td><td><button id='remove'>删除</button><button id='see'>修改</button><span id='del' style='display:none;'>"+data[i].id+"</span></td></tr>").appendTo($("#tab"));
	
	}
//点击删除
		$(".tr1").on("click","#remove",function(){
			t=this.parentNode.parentNode;
			deleteData(data);
			$(t).remove();
		})
//点击查看
		$(".tr1").on("click","#see",function(){
			$("#main").css("display","block");
			t1=this.parentNode.parentNode;
			deleteData(data);
			$(t1).remove();
			putData(data);
		})

	})
}
function putData(data){
	var a1={
		bookname:$("input:text").eq(0).val(),
		price:$("input:text").eq(1).val(),
		score:$("input:text").eq(2).val(),
		preson:$("input:text").eq(3).val(),
		form:$("input:text").eq(4).val(),
		time:$("input:text").eq(5).val(),
		num:$("input:text").eq(6).val(),
		banben:$("input:text").eq(7).val(),
		type:$("input:text").eq(8).val(),
		pic:$("input:text").eq(9).val()
	}
	$.ajax({
				url:"http://localhost:2403/mybook/"+$("#del").html(),
				type:"put",
				data:a1,
				success:function(data){
					t1.remove();
				},
				error:function(err){
					console.log(err);
				}
			})
}
function deleteData(data){
	$.ajax({
				url:"http://localhost:2403/mybook/"+$("#del").html(),
				type:"delete",
				success:function(data){
					t.remove();
				},
				error:function(err){
					console.log(err);
				}
			})
}


</script>
</html>